
class Draw {
  ctx: any;

  init({ backgroundUrl, goodsList }) {
    return new Promise(async (resolve, reject) => {
      this.ctx = uni.createCanvasContext("goodsCanvas", "componentInstance");

      await this.drawBackground(backgroundUrl);
      await this.drawTitle("");
      await this.drawCard(goodsList);
      console.log("绘制完成")
      this.ctx.draw(true, () => {
        uni.canvasToTempFilePath({
          canvasId: "goodsCanvas",
          success(res) {
            resolve(res.tempFilePath);
          },
          fail: reject,
        });
      });
    });
  }

  /** 绘制背景 */
  async drawBackground(backgroundUrl) {
    const [err, res] = await uni.downloadFile({
      url: backgroundUrl,
    }) as any
    if (res.statusCode == 200) {
      const tempFilePath = res.tempFilePath
      this.ctx.rect(0, 0, 375, 300);
      this.ctx.setFillStyle("white");
      this.ctx.fill();

      this.ctx.drawImage(tempFilePath, 0, 0, 375, 300);
      this.ctx.save();
      console.log("绘制背景")
      // this.ctx.createPattern()
    } else {
      uni.showToast({
        title: err,
        icon: 'none'
      })
    }
  }

  async drawTitle(url) {
    url = "https://oss-tencent.bgniao.cn/api/os-tz.png";
    const [err, res] = await uni.downloadFile({
      url: url
    }) as any
    if (res.statusCode == 200) {
      const tempFilePath = res.tempFilePath

      this.ctx.drawImage(tempFilePath, 76, 15, 222, 60);
      this.ctx.save();
    } else {
      uni.showToast({
        title: err,
        icon: 'none'
      })
    }
    //
  }

  /** 绘制商品卡片 */
  async drawCard(
    gooods: Array<{
      productName: string;
      productPic: string;
      productQuantity: string;
    }>,
  ) {
    const cardWidth = 112;
    const cardHeight = 180;
    const top = 100;

    return await Promise.all(
      gooods.map(async (item, i) => {
        const [err, res] = await uni.downloadFile({
          url: item.productPic
        }) as any
        if (res.statusCode == 200) {
          const tempFilePath = res.tempFilePath

          const name =
            item.productName.length > 5
              ? `${item.productName.substring(0, 5)}...`
              : item.productName;

          const left = i * cardWidth + 10 + i * 10;
          this.ctx.save()
          this.ctx.beginPath()
          this.ctx.rect(left, top, cardWidth, cardHeight)
          this.ctx.clip()

          this.ctx.setFillStyle("white");
          this.ctx.fillRect(left, top, cardWidth, cardHeight)

          this.ctx.drawImage(tempFilePath, left, top, cardWidth, cardWidth);

          this.ctx.setFontSize(16);
          this.ctx.setFillStyle("#050505");
          this.ctx.setTextAlign('center');
          this.ctx.fillText(name, cardWidth / 2 + left, top + cardWidth + 15);
          this.ctx.setFontSize(16);
          this.ctx.setFillStyle("#FF5A52");
          this.ctx.setTextAlign('center');
          this.ctx.fillText(
            `×${item.productQuantity}`,
            cardWidth / 2 + left,
            top + cardWidth + 43,
            250,
          );
          this.ctx.restore();
          this.ctx.save();
          // this.ctx.draw()
          return tempFilePath;
        } else {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        }

        // return;
      }),
    );
    // this.ctx.drawImage(tempFilePath, 10, 70, 50, 50);
  }

  /** 绘制圆角矩形 */
  roundRect(x: number, y: number, w: number, h: number, r: number) {
    // 开始绘制
    this.ctx.beginPath();
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    // 这里是使用 fill 还是 stroke都可以，二选一即可
    this.ctx.setFillStyle("transparent");
    // this.ctx.setStrokeStyle('transparent')
    // 左上角
    this.ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5, false);

    // border-top
    this.ctx.moveTo(x + r, y);
    this.ctx.lineTo(x + w - r, y);
    this.ctx.lineTo(x + w, y + r);

    // 右上角
    this.ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2, false);

    // border-right
    this.ctx.lineTo(x + w, y + h - r);
    this.ctx.lineTo(x + w - r, y + h);
    // 右下角
    this.ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5, false);

    // border-bottom
    this.ctx.lineTo(x + r, y + h);
    this.ctx.lineTo(x, y + h - r);
    // 左下角
    this.ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI, false);

    // border-left
    this.ctx.lineTo(x, y + r);
    this.ctx.lineTo(x + r, y);

    // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
    this.ctx.fill();
    // this.ctx.stroke()
    this.ctx.closePath();
    // 剪切
    this.ctx.clip();
  }
}

export default new Draw();
